<script>
import { defineComponent, computed, getCurrentInstance, onMounted, ref } from 'vue'
import { createNamespace, transformStyleSize, transformSize, getElementBounding } from '../utils'
import FanIcon from '../icon/icon.vue'

export default defineComponent({
  name: createNamespace('NoticeBar')[0],
  components: { FanIcon },
  options: {
    // https://uniapp.dcloud.io/matter.html#mp
    virtualHost: true
  },
  props: {
    text: String,
    speed: {
      type: [Number, String],
      default: 9
    },
    icon: String,
    iconSize: {
      type: [String, Number],
      default: 14
    },
    iconColor: {
      type: String
    },
    textSize: {
      type: [Number, String],
      default: 14
    },
    color: {
      type: String,
      default: '#f60'
    },
    bg: {
      type: String,
      default: '#fff7cc'
    },
    scrollable: {
      type: Boolean,
      default: true
    },
    multiline: {
      type: Boolean,
      default: false
    }
  },
  setup(props) {
    const txtWidth = ref(0)
    const boxWidth = ref(0)

    const style = ref('')
    const theStyle = computed({
      set: (val) => {
        if (val) style.value = transformStyleSize(val)
      },
      get: () => {
        const { color, bg, textSize } = props
        let s = `color:${color};background:${bg};`
        s += `font-size:${transformSize(textSize)};`
        return s + style.value
      }
    })
    const textBoxStyle = computed(() => {
      const { multiline, scrollable } = props
      let { speed } = props
      let s = `white-space:${!multiline ? 'nowrap' : 'normal'};`
      if (!scrollable && !multiline) {
        return (s += `width:100%;overflow:hidden;text-overflow:ellipsis;`)
      }
      if (multiline) return s
      if (typeof speed === 'string' && speed.includes('s')) {
        speed = speed.substring(0, speed.length - 1)
      }
      if ((scrollable || boxWidth.value <= txtWidth.value) && speed) {
        return (s += `animation: wordsLoop ${speed}s linear infinite`)
      }
    })
    const theIconColor = computed(() => {
      const { icon, iconColor, color } = props
      if (iconColor || !icon) return iconColor
      return icon.includes('/') ? iconColor : color
    })

    const _this = getCurrentInstance()
    const getWidth = async () => {
      const rect = await getElementBounding({ selector: '.fan-notice-bar__r', scope: _this })
      const rect1 = await getElementBounding({ selector: '.fan-notice-bar__text', scope: _this })
      boxWidth.value = rect.width
      txtWidth.value = rect1.width
      theStyle.value = `--notice-bar-var:${rect.width}px;`
    }

    onMounted(() => getWidth())

    return { theStyle, textBoxStyle, theIconColor }
  }
})
</script>

<template>
  <div class="fan-flex fan-align-start fan-notice-bar" :style="theStyle">
    <div v-if="icon" class="fan-notice-bar__l">
      <FanIcon :name="icon" :color="theIconColor" :size="iconSize" style="vertical-align:middle;" />
    </div>
    <div class="fan-flex-1 fan-notice-bar__r">
      <div class="fan-notice-bar__text" :style="textBoxStyle">{{ text }}</div>
    </div>
  </div>
</template>

<style lang="less">
.fan-notice-bar {
  padding: 6px 10px;
  font-size: 14px;
  line-height: 1.4;

  &__l {
    padding: 0px 6px 0 0;
  }

  &__text {
    display: inline-block;
    vertical-align: middle;
  }

  @keyframes wordsLoop {
    0% {
      transform: translateX(var(--notice-bar-var));
    }

    100% {
      transform: translateX(-100%);
    }
  }
}
</style>
